<template>
  <el-drawer :title="titleMap[mode]" v-model="visible" size="50%" destroy-on-close @closed="emit('closed')">
    <el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="formRef" label-width="100px"
             label-position="left" style="margin: 20px;">
      <el-form-item label="用户头像" prop="userAvatar">
        <SailorUpload v-model="form.userAvatar" title="上传头像"></SailorUpload>
      </el-form-item>
      <el-form-item label="唯一标识" prop="uuid" v-if="mode==='show'">
        <el-input v-model="form.uuid" clearable></el-input>
      </el-form-item>
      <el-form-item label="创建时间" prop="createdAt" v-if="mode==='show'">
        <el-input v-model="form.createdAt" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="userName">
        <el-input v-model="form.userName" placeholder="请输入完整的真实姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="登录账号" prop="userAccount">
        <el-input v-model="form.userAccount" placeholder="用于登录系统" clearable></el-input>
      </el-form-item>
      <template v-if="mode==='add'">
        <el-form-item label="登录密码" prop="password">
          <el-input type="password" v-model="form.password" clearable show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input type="password" v-model="form.password2" clearable show-password></el-input>
        </el-form-item>
      </template>
      <el-form-item label="手机号" prop="userMobile">
        <el-input v-model="form.userMobile" placeholder="请输入手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="userEmail">
        <el-input v-model="form.userEmail" placeholder="请输入邮箱" clearable></el-input>
      </el-form-item>
      <el-form-item label="所属角色" prop="group">
        <el-select v-model="form.userRole" multiple collapse-tags collapse-tags-tooltip>
          <el-option v-for="item in groups" :key="item.uuid" :label="item.roleCode"
                     :value="item.roleCode">
            <span style="float: left">{{ item.roleName }}</span>
            <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px; ">
                    {{ item.roleCode }}
                  </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户性别" prop="userSex">
        <el-radio-group v-model="form.userSex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户状态" prop="userStatus">
        <el-radio-group v-model="form.userStatus">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible=false">取 消</el-button>
      <el-button v-if="mode!=='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-drawer>
</template>

<script setup>

import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import Apis from '@/api'

const emit = defineEmits(['success', 'closed'])


let mode = ref("add")
let titleMap = reactive({
  add: '新增用户',
  edit: '编辑用户',
  show: '查看'
})
let visible = ref(false)
let isSaveing = ref(false)
//表单数据
let form = reactive({
  uuid: '',
  createdAt: '',
  userMobile: '',
  userEmail: '',
  userName: '',
  userAvatar: '',
  userSex: 1,
  userStatus: 1,
  userAccount: '',
  userRole: [],
  password2: '',
  password: '',
})
//验证规则
const rules = reactive({
  avatar: [
    {required: true, message: '请上传头像'}
  ],
  userName: [
    {required: true, message: '请输入登录账号'}
  ],
  name: [
    {required: true, message: '请输入真实姓名'}
  ],
  password: [
    {required: true, message: '请输入登录密码'},
    {
      validator: (rule, value, callback) => {
        if (form.password2 !== '') {
          formRef.value.validateField('password2');
        }
        callback();
      }
    }
  ],
  password2: [
    {required: true, message: '请再次输入密码'},
    {
      validator: (rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
    }
  ],
  group: [
    {required: true, message: '请选择所属角色', trigger: 'change'}
  ]
})
//所需数据选项
let groups = reactive([])
let groupsProps = {
  value: "id",
  multiple: true,
  checkStrictly: true
}

let formRef = ref()

onMounted(() => {
  getGroup()
})


//加载树数据
const getGroup = async () => {
  let res = await Apis.api_setting.role.list_all.get();
  Object.assign(groups, res.data)
}
//表单提交方法
const submit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      isSaveing.value = true;
      var res = await Apis.demo.post.post(form);
      isSaveing.value = false;
      if (res.code === 200) {
        emit('success', form, mode.value)
        visible.value = false;
        ElMessage.success("操作成功")
      } else {
        await ElMessageBox.alert(res.message, "提示", {type: 'error'})
      }
    } else {
      return false;
    }
  })
}
//表单注入数据
const setData = (data, m = 'add') => {
  Object.assign(form, data)
  mode.value = m;
  visible.value = true;
}

defineExpose({
  setData
})

</script>

<style>
</style>
